<template>
  <div id="myChart" style="height: 600px;width: 100%">

  </div>
</template>
<script>
import * as echarts from 'echarts'
import {ContourData,mapData} from './contour/11.js'
export default {

  mounted() {
    let xData = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184];
    let yData = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149];



    let series = [
      // 热力图
      {
        name: 'xx热力图',
        type: 'heatmap',
        emphasis: {
          itemStyle: {borderColor: '#33333350', borderWidth: 0.5}
        },
        tooltip: {
          formatter: (params) => {
            let {value, color} = params;
            return `<span style="font-size:13px;"><b>xx热力图</b><br>时间：${xData[value[0]]}<br>高度：${yData[value[1]]} m<br><span style="color:${color};font-size:13px;">值：</span>${value[2]}</span>`
          }
        },
        data: mapData
      }
    ];

// 等值线
    ContourData.features.forEach((item, index) => {
      let opt = {
        name: 'Contour',
        type: 'line',
        color: '#00000080',
        smooth: true,
        symbol: 'none',
        symbolSize: 0,
        showSymbol: false,
        // 显示折线端点的标签
        endLabel: {
          show: true,
          align: 'center',
          color: '#000000',
          formatter: item.properties.value + ''
        },
        // 隐藏重叠的标签
        labelLayout: {hideOverlap: true},
        itemStyle: {opacity: 0},
        lineStyle: {color: '#00000080', width: 1},
        // 折线图的高亮状态
        emphasis: {
          focus: 'series',
          blurScope: 'global',
          lineStyle: {width: 3, shadowColor: '#00000030', shadowBlur: 10, shadowOffsetY: 8},
          endLabel: {show: true, fontSize: 14, shadowColor: '#00000030', shadowBlur: 10, shadowOffsetY: 8}
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: item.geometry.coordinates,
      };
      series.push(opt);
    });

    let option = {
      backgroundColor: '#cccccc20',
      title: {
        text: 'Demo Chart',
        subtext: '2021-05-01 04:00 - 2021-05-01 07:54',
        left: 'center',
        top: '2%'
      },
      grid: {
        top: '12%',
        bottom: '12%',
        left: '8%',
        right: '8%'
      },
      tooltip: {
        axisPointer: {type: 'cross', label: {show: false}}
      },
      legend: {
        top: '8%',
        textStyle: {color: '#000000', fontSize: 13, fontWeight: 'bold'}
      },
      toolbox: {
        show: true,
        right: '3%',
        top: '4%',
        feature: {
          // 还原
          restore: {},
          // 保存为图片
          saveAsImage: {
            // 忽略工具栏、区域缩放组件
            excludeComponents: ['toolbox', 'dataZoom']
          }
        },
        // 工具栏icon颜色
        // iconStyle: { borderColor: '#666' }
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: {textStyle: {color: '#000000', fontSize: 13, fontWeight: 'bold'}},
          axisLine: {lineStyle: {color: '#000000', width: 2}},
          splitLine: {show: true, lineStyle: {type: 'dashed', color: '#70707030'}},
          z: 3,
          data: xData
        },
        {
          show: false,
          axisPointer: {show: false},
          min: 0,
          max: xData.length
        },
        {
          axisLine: {lineStyle: {color: '#000000', width: 2}},
          z: 4
        }
      ],
      yAxis: [
        {
          name: '高度(m)',
          nameLocation: 'center',
          nameGap: 48,
          nameTextStyle: {color: '#000000', fontSize: 14},
          type: 'category',
          axisLabel: {textStyle: {color: '#000000', fontSize: 13, fontWeight: 'bold'}},
          axisLine: {lineStyle: {color: '#000000', width: 2}},
          splitLine: {show: true, lineStyle: {type: 'dashed', color: '#70707030'}},
          z: 3,
          data: yData
        },
        {
          show: false,
          axisPointer: {show: false},
          min: 0,
          max: yData.length
        },
        {
          axisLine: {lineStyle: {color: '#000000', width: 2}},
          z: 4
        }
      ],
      visualMap: {
        right: '3.4%',
        top: 'center',
        min: 0,
        max: 75,
        calculable: true,
        realtime: false,
        seriesIndex: 0,
        itemWidth: 16,
        itemHeight: 240,
        inRange: {
          color: ['#ffffff', '#d7e3ff', '#b5c9ff', '#8fb3ff', '#7e97ff', '#6270f7', '#0062ff', '#009797', '#00c732', '#62ff00', '#97ff00', '#c7ff32', '#ffff00', '#ffa100', '#fb7900']
        },
        textStyle: {fontWeight: 'bold'}
      },
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: [0, 1],
          filterMode: 'empty',
          height: 26,
          bottom: '2.8%',
          // start: 0,
          // end: 50
        },
        {
          type: 'slider',
          yAxisIndex: [0, 1],
          filterMode: 'empty',
          width: 26,
          right: '1.2%',
          // start: 0,
          end: 70
        },
        {
          type: 'inside',
          xAxisIndex: [0, 1],
          filterMode: 'empty'
        },
        {
          type: 'inside',
          yAxisIndex: [0, 1],
          filterMode: 'empty'
        },
      ],
      series: series
    };

    let echarts1=echarts.init(document.getElementById('myChart'))
    echarts1.setOption(option)
  }
}
</script>